<template>
    <div class="safety">
      <div class="header-warpper" @click="$router.back(-1)">
         <img src="../../assets/l_jt.png" alt="">
         <span>修改手机</span> 
      </div>
      <div class="m-label">旧手机</div>
      <div class="m-input-box">
         <input class="m-input" type="text" v-model="oldmobile" readonly="readonly">
      </div>
      <div class="m-label">验证码</div>
      <div class="m-input-box">
         <input class="m-input" placeholder="请输入验证码" type="text" value=""  v-model="code1">
         <span @click="oldcode" v-show="show">获取验证码</span>
         <span v-show="!show">{{count}} s</span>
      </div> 
      <div class="m-label">新手机</div>
      <div class="m-input-box">
         <input class="m-input" placeholder="请输入手机号码" type="text" value="" v-model="mobile">
      </div> 
      <div class="m-input-box">
         <input class="m-input" placeholder="请输入验证码" type="text" value=""   v-model="code2">
         <span @click="newcode" v-show="show1">获取验证码</span>
         <span v-show="!show1">{{count1}} s</span>
      </div> 
      <div class="red_btn" @click="send">提交</div>
      <div style="height:1.333333rem"></div>
      <Tabbar :idx="5"/>
    </div>
    
</template>

<script>
// @ is an alias to /src
import Tabbar from '@/views/public/Tabbar.vue'

export default {
  name: 't_mobile',
  components: {
    Tabbar
  },
   data() {
    return {
       oldmobile:'',
       code1:'',
       code2:'',
       mobile:'',
       count:'',
       timer:null,
       count1:'',
       timer1:null,
       show:true,
       show1:true,
    }
  },
  created:function(){

    this.getinfo();

  },
  mounted () {
      


  },
  methods: {
   
    getinfo (){

      this.$axios.post("/index/usercenter/index",{})
      .then(res => {
          console.log(res)
          if(res.data.code == 0){

              if(res.data.info.mobile !== ''){
                this.oldmobile = res.data.info.mobile;
              }
          }else{
              alert(res.data.message);
          }
         
      })


    },
    oldcode (event){

      let self = this;

      this.toast1 = this.$createToast({
        txt: '旧手机号不能为空',
        type: 'txt'
      });

      if(!this.oldmobile){
        return this.toast1.show();
      }

      this.$axios.post("/index/otcexchange/sendcode",{mobile:this.oldmobile})
      .then(res => {
          console.log(res)
          if(res.data.code == 0){

              const TIME_COUNT = 60;

               if (!this.timer) {

                 this.count = TIME_COUNT;

                 this.show = false;

                 this.timer = setInterval(() => {

                 if (this.count > 0 && this.count <= TIME_COUNT) {

                   this.count--;

                  } else {

                   this.show = true;

                   clearInterval(this.timer);

                   this.timer = null;

                  }

                 }, 1000)

                }

              alert('发送成功,请留意短信');

          }else{

              alert(res.data.message);
              return;
          }
        
          
      })

    },
    newcode (event){

      let self = this;

      this.toast1 = this.$createToast({
        txt: '请输入新手机号',
        type: 'txt'
      });

      if(!this.mobile){
        return this.toast1.show();
      }

      this.$axios.post("/index/otcexchange/sendcode",{mobile:this.mobile})
      .then(res => {
          console.log(res)
          if(res.data.code == 0){

            const TIME_COUNT1 = 60;

             if (!this.timer1) {

               this.count1 = TIME_COUNT1;

               this.show1 = false;
                
               this.timer1 = setInterval(() => {

               if (this.count1 > 0 && this.count1 <= TIME_COUNT1) {

                 this.count1--;

                } else {

                 this.show1 = true;

                 clearInterval(this.timer1);

                 this.timer1 = null;

                }

               }, 1000)

              }

            alert('发送成功,请留意短信');

          }else{

              alert(res.data.message);
              return;
          }
        
          
      })

    },
    send (event){

      let self = this;

      this.toast = this.$createToast({
        txt: '旧手机号不能为空',
        type: 'txt'
      });

      this.toast1 = this.$createToast({
        txt: '请输入新手机号',
        type: 'txt'
      });

      this.toast2 = this.$createToast({
        txt: '请输入旧手机号验证码',
        type: 'txt'
      });

      this.toast3 = this.$createToast({
        txt: '请输入新手机号验证码',
        type: 'txt'
      });

      if(!this.oldmobile){
        return this.toast.show();
      }

      if(!this.mobile){
        return this.toast1.show();
      }

      if(!this.code1){
        return this.toast2.show();
      }

      if(!this.code2){
        return this.toast3.show();
      }

      this.$axios.post("/index/usercenter/upmobile",
      {newmobile:this.mobile,code_old:this.code1,code_new:this.code2})
      .then(res => {
        console.log(res)
        if(res.data.code==0){

          alert(res.data.msg);

          setTimeout(() => {
                this.$router.push('/index');
          }, 1000); 
        }else{
          
          alert(res.data.msg);
        }
      })
      .catch(function (error) {
        console.log(error);
      });  


    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
    .f-flex{
        display: flex;
        display: -webkit-flex;
        align-items: center;
    }
    .red_btn{      
        width: 92%;
        margin: auto;
        margin-top: 2rem;
    }
    .safety{
        .m-label{
            padding-left: 4%;
        }
        .m-input-box{
            padding-right: 0;
            margin-left: 4%;
            span{
                    width: 35%;
                    color: #e56337;
                    font-size: .373333rem;
                    margin-top: .58rem;
                    margin-right: 4%;
                    }
        }
        .m-input{
            color: #000;
            font-size: .426667rem;
            font-weight: bold;

        }
        .xga{
            padding-right: 4%;
            width: 30%;
            .f-flex();
            margin-top: .8rem;
            font-size: .373333rem;
            span{
                padding-right: .2rem;
                color: #aab2ca;
            }
            img{
                margin-top: 0;
            }
        }
    }
</style>

